<template>
  <view class="case-detail">
    <!-- 顶部状态卡片 -->
    <view class="status-card">
      <view class="hospital-info">
        <image :src="caseDetail.hospitalLogo" mode="aspectFit" class="logo" />
        <view class="info">
          <text class="name">{{ caseDetail.hospitalName }}</text>
          <text class="department">{{ caseDetail.departmentName }}</text>
        </view>
      </view>
      <view class="visit-info">
        <text class="date">就诊时间：{{ caseDetail.date }}</text>
        <text class="type">{{ caseDetail.visitType }}</text>
      </view>
    </view>
    
    <!-- 详细信息 -->
    <view class="detail-content">
      <!-- 基本信息 -->
      <view class="info-card">
        <view class="card-title">
          <text class="iconfont icon-info"></text>
          <text>基本信息</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">就诊人</text>
            <text class="value">{{ caseDetail.patientName }}</text>
          </view>
          <view class="info-item">
            <text class="label">性别</text>
            <text class="value">{{ caseDetail.gender }}</text>
          </view>
          <view class="info-item">
            <text class="label">年龄</text>
            <text class="value">{{ caseDetail.age }}岁</text>
          </view>
          <view class="info-item">
            <text class="label">就诊卡号</text>
            <text class="value">{{ caseDetail.cardNo }}</text>
          </view>
        </view>
      </view>
      
      <!-- 病情描述 -->
      <view class="info-card">
        <view class="card-title">
          <text class="iconfont icon-description"></text>
          <text>病情描述</text>
        </view>
        <view class="section">
          <text class="section-title">主诉</text>
          <text class="content">{{ caseDetail.complaint }}</text>
        </view>
        <view class="section">
          <text class="section-title">现病史</text>
          <text class="content">{{ caseDetail.presentIllness }}</text>
        </view>
        <view class="section">
          <text class="section-title">既往史</text>
          <text class="content">{{ caseDetail.pastHistory }}</text>
        </view>
      </view>
      
      <!-- 检查结果 -->
      <view class="info-card">
        <view class="card-title">
          <text class="iconfont icon-report"></text>
          <text>检查结果</text>
        </view>
        <view class="exam-list">
          <view 
            class="exam-item"
            v-for="(exam, index) in caseDetail.examinations"
            :key="index"
            @tap="viewReport(exam)"
          >
            <view class="exam-info">
              <text class="name">{{ exam.name }}</text>
              <text class="time">{{ exam.time }}</text>
              <text class="result">{{ exam.result }}</text>
            </view>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
      
      <!-- 诊断结果 -->
      <view class="info-card">
        <view class="card-title">
          <text class="iconfont icon-diagnosis"></text>
          <text>诊断结果</text>
        </view>
        <view class="diagnosis-list">
          <view 
            class="diagnosis-item"
            v-for="(diagnosis, index) in caseDetail.diagnoses"
            :key="index"
          >
            <text class="type">{{ diagnosis.type }}</text>
            <text class="name">{{ diagnosis.name }}</text>
          </view>
        </view>
      </view>
      
      <!-- 处理意见 -->
      <view class="info-card">
        <view class="card-title">
          <text class="iconfont icon-treatment"></text>
          <text>处理意见</text>
        </view>
        <view class="treatment-info">
          <view class="section">
            <text class="section-title">治疗方案</text>
            <text class="content">{{ caseDetail.treatment }}</text>
          </view>
          <view class="section">
            <text class="section-title">医嘱</text>
            <text class="content">{{ caseDetail.advice }}</text>
          </view>
        </view>
      </view>
      
      <!-- 处方信息 -->
      <view class="info-card">
        <view class="card-title">
          <text class="iconfont icon-prescription"></text>
          <text>处方信息</text>
        </view>
        <view class="prescription-list">
          <view 
            class="prescription-item"
            v-for="(medicine, index) in caseDetail.prescriptions"
            :key="index"
          >
            <view class="medicine-info">
              <text class="name">{{ medicine.name }}</text>
              <text class="spec">{{ medicine.specification }}</text>
            </view>
            <view class="usage">
              <text class="dosage">{{ medicine.dosage }}</text>
              <text class="frequency">{{ medicine.frequency }}</text>
              <text class="quantity">x{{ medicine.quantity }}</text>
            </view>
          </view>
        </view>
        <view class="total-amount">
          <text>处方总额</text>
          <text class="amount">¥{{ caseDetail.prescriptionAmount }}</text>
        </view>
      </view>
      
      <!-- 医生信息 -->
      <view class="info-card">
        <view class="card-title">
          <text class="iconfont icon-doctor"></text>
          <text>医生信息</text>
        </view>
        <view class="doctor-info">
          <image :src="caseDetail.doctorAvatar" mode="aspectFill" class="avatar" />
          <view class="info">
            <text class="name">{{ caseDetail.doctorName }}</text>
            <text class="title">{{ caseDetail.doctorTitle }}</text>
            <text class="specialty">{{ caseDetail.doctorSpecialty }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-bar">
      <button class="action-btn" @tap="viewAllReports">
        <text class="iconfont icon-report"></text>
        <text>查看报告</text>
      </button>
      <button class="action-btn primary" @tap="bookAgain">
        <text class="iconfont icon-appointment"></text>
        <text>复诊预约</text>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 病例详情数据
const caseDetail = ref({
  id: 1,
  hospitalName: '澳门镜湖医院',
  hospitalLogo: '/static/hospital/kiang-wu.jpg',
  departmentName: '心内科',
  date: '2024-03-25 09:30',
  visitType: '门诊',
  patientName: '张三',
  gender: '男',
  age: 45,
  cardNo: '1234567890',
  complaint: '胸闷、气短2天',
  presentIllness: '患者2天前无明显诱因出现胸闷、气短，活动后加重...',
  pastHistory: '高血压病史5年，长期服用降压药物...',
  examinations: [
    {
      id: 1,
      name: '心电图检查',
      time: '2024-03-25 10:00',
      result: '窦性心律，心率75次/分...',
      hasReport: true
    },
    {
      id: 2,
      name: '血常规检查',
      time: '2024-03-25 10:30',
      result: '各项指标正常',
      hasReport: true
    }
  ],
  diagnoses: [
    { type: '初步诊断', name: '冠心病' },
    { type: '并发症', name: '高血压2级' }
  ],
  treatment: '1. 硝酸甘油片含服\n2. 阿司匹林肠溶片口服',
  advice: '1. 建议定期复查\n2. 控制饮食\n3. 规律服药',
  prescriptions: [
    {
      name: '硝酸甘油片',
      specification: '0.5mg*50片/盒',
      dosage: '遵医嘱',
      frequency: '需要时含服',
      quantity: 1
    },
    {
      name: '阿司匹林肠溶片',
      specification: '100mg*30片/盒',
      dosage: '1片',
      frequency: '每日1次',
      quantity: 2
    }
  ],
  prescriptionAmount: 156.5,
  doctorName: '张医生',
  doctorTitle: '主任医师',
  doctorSpecialty: '擅长：冠心病、心律失常、高血压等心血管疾病的诊治',
  doctorAvatar: '/static/doctor/doctor1.jpg'
})

// 查看报告
const viewReport = (exam) => {
  if (exam.hasReport) {
    uni.navigateTo({
      url: `/pages/records/report?id=${exam.id}`
    })
  }
}

// 查看全部报告
const viewAllReports = () => {
  uni.navigateTo({
    url: `/pages/records/reports?caseId=${caseDetail.value.id}`
  })
}

// 复诊预约
const bookAgain = () => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?departmentId=${caseDetail.value.departmentId}&hospitalId=${caseDetail.value.hospitalId}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const caseId = page.$page?.options?.id
  
  // 加载病例详情
  loadCaseDetail(caseId)
})

const loadCaseDetail = (id) => {
  // 这里应该调用API获取数据
  console.log('加载病例详情:', id)
}
</script>

<style lang="scss">
.case-detail {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .status-card {
    background: $primary-gradient;
    padding: 40rpx 30rpx;
    
    .hospital-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      
      .logo {
        width: 80rpx;
        height: 80rpx;
        border-radius: $radius-md;
        margin-right: 20rpx;
      }
      
      .info {
        .name {
          font-size: 32rpx;
          color: #fff;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .department {
          font-size: 26rpx;
          color: rgba(255,255,255,0.9);
        }
      }
    }
    
    .visit-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 26rpx;
        color: rgba(255,255,255,0.9);
      }
      
      .type {
        background: rgba(255,255,255,0.2);
        padding: 4rpx 16rpx;
        border-radius: $radius-xl;
      }
    }
  }
  
  .detail-content {
    padding: 20rpx;
    
    .info-card {
      background: #fff;
      border-radius: $radius-lg;
      padding: 30rpx;
      margin-bottom: 20rpx;
      box-shadow: $shadow-sm;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .card-title {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        .iconfont {
          font-size: 36rpx;
          color: $primary-color;
          margin-right: 12rpx;
        }
        
        text {
          font-size: 30rpx;
          color: $text-primary;
          font-weight: bold;
        }
      }
      
      .info-list {
        .info-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16rpx 0;
          border-bottom: 1rpx solid #eee;
          
          &:last-child {
            border-bottom: none;
          }
          
          .label {
            font-size: 28rpx;
            color: $text-regular;
          }
          
          .value {
            font-size: 28rpx;
            color: $text-primary;
          }
        }
      }
      
      .section {
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .section-title {
          font-size: 28rpx;
          color: $text-regular;
          margin-bottom: 12rpx;
          display: block;
        }
        
        .content {
          font-size: 28rpx;
          color: $text-primary;
          line-height: 1.6;
          white-space: pre-wrap;
        }
      }
      
      .exam-list {
        .exam-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;
          border-bottom: 1rpx solid #eee;
          
          &:last-child {
            border-bottom: none;
          }
          
          .exam-info {
            flex: 1;
            
            .name {
              font-size: 28rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 8rpx;
              display: block;
            }
            
            .time {
              font-size: 24rpx;
              color: $text-secondary;
              margin-bottom: 8rpx;
              display: block;
            }
            
            .result {
              font-size: 26rpx;
              color: $text-regular;
            }
          }
          
          .icon-arrow-right {
            font-size: 24rpx;
            color: $text-secondary;
          }
          
          &:active {
            opacity: 0.8;
          }
        }
      }
      
      .diagnosis-list {
        .diagnosis-item {
          margin-bottom: 16rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .type {
            font-size: 26rpx;
            color: $text-secondary;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .name {
            font-size: 28rpx;
            color: $text-primary;
            font-weight: bold;
          }
        }
      }
      
      .prescription-list {
        .prescription-item {
          padding: 20rpx 0;
          border-bottom: 1rpx solid #eee;
          
          &:last-child {
            border-bottom: none;
          }
          
          .medicine-info {
            margin-bottom: 12rpx;
            
            .name {
              font-size: 28rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .spec {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
          
          .usage {
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            text {
              font-size: 26rpx;
              color: $text-regular;
            }
            
            .quantity {
              font-size: 28rpx;
              color: $text-primary;
              font-weight: bold;
            }
          }
        }
      }
      
      .total-amount {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 20rpx;
        padding-top: 20rpx;
        border-top: 1rpx solid #eee;
        
        text {
          font-size: 26rpx;
          color: $text-regular;
          margin-right: 16rpx;
          
          &.amount {
            font-size: 32rpx;
            color: $danger;
            font-weight: bold;
          }
        }
      }
      
      .doctor-info {
        display: flex;
        align-items: center;
        
        .avatar {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name {
            font-size: 30rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .title {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .specialty {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: $text-regular;
      background: $bg-color;
      border-radius: $radius-xl;
      
      .iconfont {
        font-size: 32rpx;
        margin-right: 8rpx;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 